import Link from "next/link";

const ROUTES = [
  "about",
  "blog",
  "content",
  "dashboard",
  "exception",
  "function-component",
  "/gallery",

  "products",

  "route-api",
  "middleware",
]
export default function Page() {
  return (
    <main>
      <h1 className="text-4xl">Demo</h1>
      <ol style={{listStyle: 'decimal outside'}}>
        <li>
          npx create-next-app@latest
          <p>APP Router</p>
        </li>
        <li>
          app 文件夹
          <p>app/page (export)</p>
          <p>app/layout (children) (must have !!!)</p>
          <p>app/not-found</p>
        </li>

        { ROUTES.map((x:string) => (
          <Link key={x} href={
            x[0] === '/'
            ? x
            : `/demo/${x}`
          }>
            <li>{x.replace('/', '')}</li>
          </Link>
        )) }

      </ol>
    </main>
  )
}
